.c-sf-button {
  flex: 1 1 200px;
  margin: $add-panel-gutter;
  appearance: none;
  color: $color-grey-1;
  line-height: 1.833;
  font-weight: 600;
  font-size: 12px;
  font-family: $font-sans;
  text-align: start;
  background: $color-grey-5;
  padding: $type-button-padding-vertical $type-button-padding-horizontal;
  border: 1px solid $color-grey-4;
  border-radius: $border-radius;
  outline: none;
  cursor: pointer;
  overflow: hidden;

  &:hover,
  &:focus {
    color: $color-white;
    background-color: $color-teal;
  }

  &[disabled] {
    opacity: 0.2;
    pointer-events: none;
  }

  &__icon {
    width: 16px;
    height: 16px;
    margin-inline-end: 0.5em;
    vertical-align: text-top;
  }
}
